<script setup lang="ts">
import { watch } from 'vue';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useEcharts } from '@/hooks/common/echarts';

defineOptions({
  name: 'RingChart'
});

const progress = defineModel<number>('progress', { default: 0 });

let progressColor = '#3498db';

const appStore = useAppStore();
const props = defineProps({
  title: {
    type: String,
    default: "xx设备占用率"
  },
  content: {
    type: String,
    default: "15/100自定义内容"
  },
  total: {
    type: [Number, String, null],
    default: 100
  }
})


const { domRef, updateOptions, setOptions } = useEcharts(() => ({
  tooltip: { show: false },
  series: [{
    name: '进度',
    type: 'pie',
    radius: ['75%', '85%'],
    avoidLabelOverlap: false,
    itemStyle: {
      borderRadius: 25,
      borderColor: '#fff',
      borderWidth: 0
    },
    label: { show: false },
    emphasis: { disabled: true },
    labelLine: { show: false },
    data: [
      {
        value: progress.value,
        name: '进度',
        itemStyle: { color: progressColor }
      },
      {
        value: Number(props.total ?? 100) - progress.value,
        name: '剩余',
        itemStyle: { color: '#f0f0f0' }
      }
    ]
  }],
  title: {
    name: "进度"
  },
  // 修正的核心部分：graphic配置
  graphic: [{
    type: 'text',// 类型，可以是文字、图片或其它类型
    id: 'text1',
    left: 'center',
    top: '35%',
    style: {
      text: '',
      fill: '#273849', // 文字的颜色
      fontSize: 22
    }
  },
  {
    type: 'text',
    id: 'text2',
    left: 'center',
    top: '55%',
    style: {
      text: '',
      fill: '#273849',
      fontSize: 14
    }
  }]
}));

// async function mockData() {



// }

// function updateLocale() {
//   updateOptions((opts, factory) => {
//     const originOpts = factory();

//     opts.series[0].name = originOpts.series[0].name;
//     opts.series[1].name = originOpts.series[1].name;

//     return opts;
//   });
// }

async function renderData() {
  await new Promise(resolve => {
    setTimeout(resolve, 0);
  });
  updateOptions(opts => {

    opts.series[0].data = [
      {
        name: '进度',
        value: progress.value,
        itemStyle: {
          color: progressColor
        }
      },
      {
        value: 100 - progress.value,
        name: '剩余',
        itemStyle: {
          color: '#f0f0f0'
        }
      }
    ];
    opts.graphic[0].style.text = `${progress.value}%`;
    opts.graphic[1].style.text = props.title;
    return opts;
  });
}

watch(progress, () => {
  //更新数据
  renderData();
})
// init
</script>

<template>
  <div class="h-170px">
    <div ref="domRef" class="h-150px"></div>
    <!-- 新增的文字容器 -->
    <div v-if="props.content && props.content.length > 0"
      class="bottom-0   w-full text-center color-#adb0bc text-xs">
      {{ props.content }}
    </div>
  </div>
</template>

<style scoped></style>
